<template>
  <div class="equipment">
    <!-- 地图容器 -->
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { getequipmentlist } from '@/api/echarts';

let map = null;
export default {
  name: 'index',
  data() {
    return {};
  },
  mounted() {
    // DOM初始化完成进行地图初始化
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "720d4d2c828ead3606fc2c7c8f48955f", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale', 'AMap.Marker', 'AMap.InfoWindow', 'AMap.MarkerCluster'],
        AMapUI: {
          version: '1.1',
          plugins: ['overlay/SimpleMarker']
        } // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        map = new AMap.Map("container", { // 设置地图容器id
          viewMode: "2D", // 是否为3D地图模式
          terrain: false, // 开启地形图
          zoom: 4, // 初始化地图级别
          center: [105.602725, 37.076636], // 初始化地图中心点位置
          mapStyle: "amap://styles/blue",
        });
        this.aMapUiLoad();
      }).catch(e => {
        console.log(`高德地图加载错误提示${e}`); // 加载错误提示
      });
    },
    // 区划聚合+海量点展示
    initPage(DistrictCluster, PointSimplifier) {
  var pointSimplifierIns = new PointSimplifier({
    map: map, // 所属的地图实例
    autoSetFitView: false, // 禁止自动更新地图视野
    zIndex: 110,
    getPosition: function (item) {
      if (!item) {
        return null;
      }
      return item.lnglat;
    },
    getHoverTitle: function (dataItem, idx) {
      return `<div style="height: 12vh;width: 16vw;background-color:#FFFFFF;margin:0;padding:0;z-index:9999999">
                <h2>第${idx}台设备</h2>
                <p>
                   设备简介
                </p>
              </div>`;
    },
    renderOptions: {
      pointStyle: {
        width: 6,
        height: 6,
        fillStyle: 'rgba(153, 0, 153, 0.38)'
      },
      hoverTitleStyle: {
        position: 'top'
      }
    }
  });

  var distCluster = new DistrictCluster({
    zIndex: 100,
    map: map, // 所属的地图实例
    getPosition: function (item) {
      if (!item) {
        return null;
      }
      return item.lnglat;
    },
    renderOptions: {
      getFeatureStyle: function (feature, dataItems) {
        if (dataItems.length > 3000) {
          return {
            fillStyle: 'rgba(0, 166, 198, 0.8)' // 青绿色调
          };
        } else if (dataItems.length > 1000) {
          return {
            fillStyle: 'rgba(0, 138, 184, 0.7)' // 水蓝色调
          };
        } else if (dataItems.length > 500) {
          return {
            fillStyle: 'rgba(0, 115, 153, 0.6)' // 深青色调
          };
        } else if (dataItems.length < 501) {
          return {
            fillStyle: 'rgba(153, 204, 255, 0.5)' // 浅青色调
          };
        }
        return {};
      },
      featureStyle: {
        fillStyle: '', // 这里保留你的原始设置
        lineWidth: 1,
        strokeStyle: 'rgb(102, 204, 255)',
        hoverOptions: {
          fillStyle: 'rgba(153, 204, 255, 0.5)', // 浅青色调
          lineWidth: 5,
          strokeStyle: 'rgb(255, 102, 0)' // 橙色调
        }
      },
      featureEventSupport: true,
      clusterMarkerEventSupport: true,
      clusterMarkerEventNames: ['click', 'rightclick', 'mouseover', 'mouseout']
    }
  });

  window.distCluster = distCluster;

  function updateMarkerVisibility() {
    // 确保所有标记都被过滤掉计数为 0 的标记
    const markers = document.querySelectorAll('.amap-ui-district-cluster-marker');
    markers.forEach(marker => {
      const countText = marker.querySelector('.amap-ui-district-cluster-marker-body').textContent;
      if (parseInt(countText, 10) === 0) {
        marker.style.display = 'none';
      } else {
        marker.style.display = '';
      }
    });
  }

  function refresh() {
    var zoom = map.getZoom();
    var pointStyle = pointSimplifierIns.getRenderOptions().pointStyle;
    pointStyle.width = pointStyle.height = 2 * Math.pow(1.2, zoom - 3);
    updateMarkerVisibility(); // 确保在每次缩放结束后更新标记的可见性
  }

  map.on('zoomend', function () {
    refresh();
  });

  refresh(); // 初始调用以确保标记的正确显示

  const loading = this.$loading({
    lock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });

  getequipmentlist({ limit: 10000 }).then(res => {
    if (res.code === 0) {
      let data = res.msg;
      let transformedData = data
        .filter(item => item.count !== 0) // 过滤掉 count 为 0 的数据
        .map(item => ({
          lnglat: [parseFloat(item.lng), parseFloat(item.lat)],
          addr: item.addr,
          addrDetail: item.addrDetail,
          addtime: item.addtime,
          agreement: item.agreement,
          detail: item.detail,
          equipmentNo: item.equipmentNo,
          isWorkorder: item.iSWorkorder,
          id: item.id,
          mainBind: item.mainBind,
          status: item.status,
          type: item.type,
          count: item.count
        }));

      distCluster.setData(transformedData); // 设置 distCluster 的数据为处理后的数组
      pointSimplifierIns.setData(transformedData); // 设置 pointSimplifierIns 的数据为处理后的数组
    } else {
      console.error('API 返回错误:', res);
    }
  }).catch(error => {
    console.error('请求出错:', error);
  }).finally(() => {
    loading.close();
  });
}

,
    // 加载(区划聚合+海量点展示)、行政区划相关组件
    aMapUiLoad() {
  AMapUI.load(['ui/geo/DistrictCluster', 'ui/misc/PointSimplifier', 'lib/$'], (DistrictCluster, PointSimplifier) => {
    // 启动页面
    this.initPage(DistrictCluster, PointSimplifier);

    // 确保地图和所有标记完全加载后再隐藏标记盒子
    setTimeout(() => {
      const markers = document.querySelectorAll('.amap-ui-district-cluster-marker');
      markers.forEach(marker => {
        const countText = marker.querySelector('.amap-ui-district-cluster-marker-body').textContent;
        if (parseInt(countText, 10) === 0) {
          marker.style.display = 'none';
        }
      });
    }, 1000); // 1000ms 延迟可以根据需要调整
  });
}

  }
};
</script>

<style lang="scss">
.equipment {
  #container {
    width: 100%;
    height: 120vh;
  }
}
</style>
